<template>
  <div class="w-full flex items-center gap-2 overflow-x-auto">
    <button 
      v-for="category in CATEGORIES" 
      :key="category.id" 
      @click="selectCategory(category.id)"
      class="h-9 px-3 rounded-lg text-sm whitespace-nowrap"
      :class="activeCategory === category.id ? 'bg-[#635BFF] text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'"
    >
      {{ category.name }}
    </button>

    <!-- <div class="ml-auto flex items-center gap-2">
      <select class="h-9 px-3 rounded-lg bg-white ring-1 ring-gray-200 text-sm text-gray-700">
        <option>热门排序</option>
        <option>更新时间</option>
        <option>收藏最多</option>
      </select>
      <button class="h-9 w-9 rounded-lg ring-1 ring-gray-200 text-gray-500 hover:bg-gray-50">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mx-auto" viewBox="0 0 24 24" fill="currentColor"><path d="M3 5h18v2H3V5zm4 6h10v2H7v-2zm-2 6h14v2H5v-2z"/></svg>
      </button>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { CATEGORIES } from '@/config/categories'

const route = useRoute()
const router = useRouter()

// 从URL参数获取当前分类，默认为"全部"
const activeCategory = ref(route.query.category as string || 'all')

// 选择分类
const selectCategory = (categoryId: string) => {
  activeCategory.value = categoryId
  
  // 更新URL参数
  router.push({
    name: 'explore',
    query: { 
      ...route.query, 
      category: categoryId === 'all' ? undefined : categoryId 
    }
  })
}

// 监听路由变化
watch(() => route.query.category, (newCategory) => {
  activeCategory.value = newCategory as string || 'all'
})
</script>


